<template>
  <div id="app">
    <header>
      <h1>电力收费管理系统</h1>
      <nav>
        <router-link to="/settings" style="font-size: 19px;">系统介绍:</router-link>
        <router-link to="/login" style="font-size: 19px;">通过该系统，电力供应商可以实时掌握用户的用电情况，自动计算电费，并提供在线查询和缴纳服务；用户则可以方便地查询自己的用电信息和电费账单，随时进行电费缴纳和管理。该系统具有高度的可扩展性和可定制性，可以根据不同用户的需求进行灵活配置和功能扩展。</router-link>

      </nav>
    </header>

    <a href="https://www.pinduoduo.com/" target="_blank">
  <img src="../assets/images/pdd.png" alt="领取拼多多百亿补贴" style="width: 100%;">
</a>


    <main>
      <h2>欢迎，{{ userName }}</h2>
      <div class="dashboard">
        <div class="card">
          <h3>总电量消耗</h3>
          <p>{{ totalElectricity }} kWh</p>
          <div id="electricity-chart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="card">
          <h3>总电费</h3>
          <p>{{ totalRevenue }} 元</p>
          <div id="revenue-chart" style="width: 100%; height: 300px;"></div>
        </div>
        <div class="card">
          <h3>未支付账单</h3>
          <p>{{ unpaidBills }} 张</p>
          <div id="bills-chart" style="width: 100%; height: 500px;"></div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  data() {
    return {
      userName: '管理员',
      totalElectricity: '116',
      totalRevenue: '180',
      unpaidBills: '150',
      version: '3.8.8'
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank');
    },
    initCharts() {
      const electricityChart = echarts.init(document.getElementById('electricity-chart'));
      const revenueChart = echarts.init(document.getElementById('revenue-chart'));
      const billsChart = echarts.init(document.getElementById('bills-chart'));

      // 设置图表选项
      electricityChart.setOption({
        title: {
          text: '电量消耗'
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '电量消耗',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20, 30]
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      });

      revenueChart.setOption({
        title: {
          text: '总电费'
        },
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {},
        series: [{
          name: '总电费',
          type: 'line',
          data: [10, 22, 28, 23, 19, 34, 90]
        }],
        tooltip: {
          trigger: 'axis'
        }
      });

      billsChart.setOption({
        title: {
          text: '未支付账单'
        },
       
        series: [{
          name: '未支付账单',
          type: 'pie',
          data: [
            { value: 10, name: '周一' },
            { value: 5, name: '周二' },
            { value: 15, name: '周三' },
            { value: 25, name: '周四' },
            { value: 20, name: '周五' },
            { value: 35, name: '周六' },
            { value: 30, name: '周日' }
          ]
        }],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        }
      });
    }
  },
  mounted() {
    this.initCharts();
  }
};
</script>

<style scoped>
header {
  background-color: #f4f4f4;
  padding: 20px;
}

nav a {
  margin-right: 10px;
}

main {
  padding: 20px;
}

.card {
  border: 1px solid rgba(204, 204, 204, 0.63);
  margin: 10px;
  padding: 20px;
}
</style>
